<template>
  <div class="box">
    <strong class="title">vue3+ts练习项目登录</strong>
    <el-tabs class="box-show" type="border-card" :stretch="true">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><List /></el-icon>
            <span>账号密码登录</span>
          </span>
        </template>
        <login-account></login-account>
      </el-tab-pane>
      <el-tab-pane label="Config">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><Iphone /></el-icon>
            <span>手机验证码登录</span>
          </span>
        </template>
        <h2>手机验证码登录</h2>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import LoginAccount from "@/views/login/cpns/login-account.vue";
</script>

<style lang="less">
.box {
  width: 320px;
  text-align: center;
  .box-show {
    box-shadow: 0 1px 4px rgba(55, 130, 204, 0.3),
      0 0 20px rgba(51 12 97 / 10%) inset;
  }
  .title {
    text-align: center;
    quotes: "“" "”";
    font-style: normal;
    color: transparent;
    -webkit-background-clip: text;
    will-change: transform;
    padding-top: 0.5px;
    overflow: hidden;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.004em;
    display: block;
    margin: 6px 0;
    line-height: 1.21875;
    font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC,
      Helvetica Neue, Helvetica, Arial, sans-serif;
    animation: gradientAnim 2s ease-in-out forwards;
    background-image: linear-gradient(
      180deg,
      #ffb6ff,
      #b344ff 10%,
      #ae38ff 33%,
      #ffb6ff 45%,
      #ffe3ff 50%,
      #ffb6ff 66%,
      #b344ff
    );
    background-size: 100% 300%;
    background-position: 50% 0;
  }
}
</style>
